<template>
  <div class="play">
    <Header>
      <span slot="middle">精品歌单</span>
    </Header>

    <div class="list">
       <div class="playmusic" v-for="item in list" :key="item.id" @click="godetail(item.id)">
         <img :src="item.picUrl" alt="">
         <p>{{item.name}}</p>

       </div>

    </div>




    <!-- <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="playmusic" v-for="item in list" :key="item.id" @click="godetail(item.id)">
        <img :src="item.picUrl" alt="">
        <div class="right">
          <p>{{item.name}}</p>

        </div>

      </div>
    </van-list> -->
  </div>
</template>

<script>
import Header from "../../components/NavBar.vue"
import {reqmusic} from "../../api/music"
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //初始化
    async initmusic(){
      const result =await reqmusic();
      console.log(result);
      if(result.code==200){
        this.list=result.result;
      }
    },
    //跳转歌单详情页
     godetail(id){
      this.$router.push(`/musicdetail/${id}`)
    },
    // onLoad(){
    //   this.initmusic();
    //   this.finished=true;

    // }
  },
  created() {
    this.initmusic();
  },
  mounted() {},
  components: {Header},
};
</script>
<style scoped>
.list{
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

}
.playmusic img{
  display: block;
  width: 100px;
  height: 100%;
  box-shadow: 0px 0px 2px;
  border-radius: 5px;
}
.playmusic .right{
  flex: 1;
  padding-left: 10px;
  
}
.playmusic p{
  width: 100px;
  font-size: 12px;
  -webkit-line-clamp:2;/* 显示多少行 */
  display:-webkit-box; /* 配合上面使用 伸缩盒 */
  -webkit-box-orient:vertical;/* 检测排列方式 */
  overflow:hidden; 
  text-overflow: ellipsis;/* 超出文本省略号 */
}

.van-list{
  background-color: #F7F7F7;
}


</style>
